<template>
  <div class="authentication_user">
    <div class="form_wrapper">
      <c-form
        v-model="form"
        :col="{ labelCol: { span: 10 }, wrapperCol: { span: 14 } }"
        ref="form"
        :data="formData"
        :rules="formRules"
        @submit="submit"
        :submitLoading="submitLoading"
      >
      </c-form>
    </div>
    <c-face
      v-model="qrcodeVisible"
      :qrcodeUrl="qrcodeData.authUrl"
      :flowId="qrcodeData.flowId"
      @success="faceSuccess"
      @fail="faceFail"
      :type="form.certificationType === 1 ? 1 : 0"
    ></c-face>
  </div>
</template>

<script>
import instance from "@/main";
import { userfaceauth } from "@/api/certify";
import { userfaceactivate } from "@/api/activate";
import cFace from "@/components/face";

const user = [
  {
    label: "姓名",
    prop: "userFullName"
  },
  {
    label: "身份证号",
    prop: "residentId"
  },
  {
    label: "认证方式",
    prop: "certificationType",
    type: "radio",
    typeData: [
      {
        // label: "短信认证",
        label: "支付宝刷脸",
        value: 2
      },
      {
        label: "微信刷脸",
        value: 1
      }
    ]
  }
];

export default {
  components: {
    cFace
  },
  props: {
    userAuthData: {
      type: Object
    }
  },
  data() {
    return {
      form: {
        userFullName: null,
        residentId: null,
        certificationType: 2,
        mobile: null,
        authCode: null
      },
      formRules: {
        userFullName: [
          { required: true, message: "请输入姓名", trigger: "change" }
        ],
        residentId: [
          { required: true, validator: instance.$vd.idCard, trigger: "change" }
        ]
        // mobile: [
        //   { required: true, validator: instance.$vd.phone, trigger: "change" }
        // ],
        // authCode: [
        //   { required: true, message: "请输入验证码", trigger: "change" }
        // ]
      },
      qrcodeVisible: false,
      qrcodeData: {},
      flowId: null,
      submitLoading: false
    };
  },
  computed: {
    // 是否在激活页
    isActivate() {
      return this.$route.name === "activatePersonal";
    },
    formData() {
      let userForm = user;
      // // 判断个人实名认证方式
      // userForm =
      //   this.form.certificationType === 1
      //     ? userForm
      //     : userForm.concat([
      //         {
      //           label: "手机号",
      //           prop: "mobile",
      //           slot: "mobile"
      //         },
      //         {
      //           label: "验证码",
      //           prop: "authCode"
      //         }
      //       ]);
      userForm = userForm.concat([
        {
          label: " ",
          colon: false,
          type: "submit",
          submitText: "提交认证"
        }
      ]);
      if (
        this.userAuthData &&
        this.userAuthData.userFullName &&
        this.userAuthData.residentId &&
        this.$route.name !== "activatePersonal"
      ) {
        userForm[0].type = "text";
        userForm[1].type = "text";
      }
      return userForm;
    }
  },
  methods: {
    // 核身认证失败
    faceFail() {
      // 重新获取二维码地址
      this.getFaceQrcodeUrl();
    },
    // 核身认证成功回调
    faceSuccess() {
      this.qrcodeVisible = false;
      this.$emit("success");
    },
    // 获取支付宝/微信刷脸二维码
    getFaceQrcodeUrl() {
      let request = this.isActivate ? userfaceactivate : userfaceauth;
      request({
        userFullName: this.form.userFullName,
        residentId: this.form.residentId,
        faceAuthMode: this.form.certificationType
        // callbackUrl: "https://h5.manytrader.net/facePay"
      })
        .then(res => {
          this.qrcodeVisible = true;
          this.qrcodeData = res;
        })
        .finally(() => {
          this.submitLoading = false;
        });
    },
    // 校验
    submit() {
      this.$refs.form.validated().then(() => {
        let _this = this;
        this.$confirm({
          title: "温馨提示",
          content: "请核实信息，是否确认提交?",
          okText: "确认",
          cancelText: "取消",
          onOk() {
            return new Promise(resolve => {
              _this.submitLoading = true;
              _this.getFaceQrcodeUrl();
              resolve();
            });
          }
        });
      });
    }
  },
  created() {
    // 是否回显姓名、身份证号
    if (
      this.userAuthData &&
      this.userAuthData.userFullName &&
      this.userAuthData.residentId
    ) {
      this.form.userFullName = this.userAuthData.userFullName;
      this.form.residentId = this.userAuthData.residentId;
    }
  }
};
</script>
